import React, { useEffect, useMemo, useState } from 'react'
import { NavBar, Button, Toast, ProgressBar, Tag, DotLoading, Popup, Tabs } from 'antd-mobile'
import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
import styles from './orderDetail.module.css'
import dayjs from 'dayjs'
import instance from '../../api/instance'
import { AddCircleOutline } from 'antd-mobile-icons'
import { useDispatch, useSelector } from 'react-redux'
import { Alipay,WechatPay,Checked } from '@react-vant/icons';
import Navbar from '../../components/NavBar/NavBar'

function Index() {
    let navigate = useNavigate()
    let dispatch = useDispatch()
    const { state } = useLocation()
    const [sp]=useSearchParams()
    const id=state.id
    const price=sp.get('price')
    const title='订单支付'
    const [visible1, setVisible1] = useState(false)

    //进度条 1什么也没做  2占座中  3占座失败  4占座成功
    const [jind, setJind] = useState(1)
    //进度条
    const [dom, setDom] = useState(0)

    useEffect(() => {
        setJind(2)
        //范围
        const random = Math.floor(Math.random() * 10) + 1
        const timer = setInterval(() => {
            setDom((pre) => {
                //每次前进25
                const PerDom = pre + 25
                if (PerDom >= 100) {
                    PerDom == 100
                    clearInterval(timer)
                    if (random > 2) {
                        setJind(4)
                        Toast.show('占座成功')
                        return
                    }
                    else {
                        setJind(3)
                        Toast.show('占座失败')
                        return
                    }
                }
                return PerDom
            })
        }, 1000)
        return (() => {
            clearInterval(timer)
        })
    }, [])

    //进度条渲染文字
    const jindwenz = useMemo(() => {
        switch (jind) {
            case 1:
                return <div></div>
            case 2:
                return (
                    <div>
                        占座中<DotLoading />
                        <p>
                            您的订单正在12306排队占座中，如长时间未成功占座，可能票源紧张，建议取消排队更换其他车次
                        </p>
                    </div>
                )
            case 3:
                return (
                    <div>
                        占座失败
                        <p>
                            失败原因（lua返回的失败原因）
                        </p>
                    </div>
                )
            case 4:
                return (
                    <div>
                        占座成功
                        <p>
                            座位已成功锁定，请在00:29:59内完成支付
                        </p>
                    </div>
                )
            default:
                break;
        }
    }, [jind])

    const [zf, setZf] = useState(0)
    const handelZf = () => {
        setVisible1(true)
        setTimeout(() => {
            setZf(100)
        }, 1000)
    }

    //支付
    const handelPay=async()=>{
        const res=await instance.get('/api/pay',{params:{title,id,price}})
        console.log('res',res)
        const {data,code}=res.data
        if(code==200){
            window.location.href=data
        }
    }

    return (
        <div>
            <Navbar title='订单详情'></Navbar>
            <ProgressBar
                percent={dom}
                style={{
                    '--track-width': '4px',
                }}
            />
            {jindwenz}
            <div className={styles.list}>
                <div className={styles.listItem}>
                    <span>{state.start}</span>
                    <span>====&gt;</span>
                    <span>{state.end}</span>
                    <span>{state.startTime}</span>
                    <span style={{ fontSize: '16px' }}>￥{state.tick.secondTick}起</span>
                </div>
                <div className={styles.listItem}>
                    <span>二等座：有票</span>
                    <span>一等座：有票</span>
                    <span>商务座：有票</span>
                </div>
            </div>
            <Button block color='success' size='large' onClick={() => handelZf()}>
                提交订单
            </Button>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
            >
                <ProgressBar
                    percent={zf}
                    style={{
                        '--track-width': '7px',
                    }}
                />
                <div>
                    支付中<DotLoading />
                </div>
                <div className={styles.list}>
                    <div className={styles.listItem}>
                        <span>{state.start}</span>
                        <span>====&gt;</span>
                        <span>{state.end}</span>
                        <span>{state.startTime}</span>
                        <span style={{ fontSize: '16px' }}>￥{state.tick.secondTick}起</span>
                    </div>
                    <div className={styles.listItem}>
                        <span>二等座：有票</span>
                        <span>一等座：有票</span>
                        <span>商务座：有票</span>
                    </div>
                </div>
                <Button block color='default' fill='none' size='large' shape='rectangular'
                onClick={()=>handelPay()}>
                    <Alipay color='blue' />支付宝
                </Button>
                <Button block color='default' fill='none' size='large' shape='rectangular'>
                    <WechatPay color='green'  />微信
                </Button>
                <Button block color='default' fill='none' size='large' shape='rectangular'>
                    <Checked color='red'  />云闪付
                </Button>
            </Popup>
        </div>
    )
}

export default Index
